<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小程序管理</el-breadcrumb-item>
			<el-breadcrumb-item>banner列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row>
			<el-button size="small" type="primary" @click="addBanner">新增</el-button>
		</el-row>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="id" width="180">
			</el-table-column>
			<el-table-column prop="name" label="banner名称" width="180">
			</el-table-column>
			<el-table-column prop="imgUrl" label="banner图片">
			<template slot-scope="scope">
				<el-image
					style="width: 100px; height: 100px"
					:src= "scope.row.imgUrl"></el-image>
			</template>
			</el-table-column>
			<el-table-column prop="path" label="跳转地址">
			</el-table-column>
			<el-table-column prop="sort" label="排序">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					  <span v-if="scope.row.status == 1">启用</span>
					  <span v-if="scope.row.status == 2">禁用</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
					<el-button @click="delBanner(scope.row)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="banner添加" :visible.sync="dialogFormVisible">
			<el-form :model="bannerData">
				<el-form-item label="名称" :label-width="formLabelWidth">
					<el-input v-model="bannerData.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片" :label-width="formLabelWidth">
					<el-upload action="http://openpay.duolaibei.com/admin/upload/upload" list-type="picture-card"
					  :on-remove="handleRemove" :on-success = "upsuccess">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="imgShow">
						<img width="100%" :src="bannerData.imgUrl" alt="">
					</el-dialog>
				</el-form-item>
				<el-form-item label="跳转地址" :label-width="formLabelWidth">
					<el-input v-model="bannerData.path" autocomplete="off" placeholder="跳转h5链接"></el-input>
				</el-form-item>
				<el-form-item label="排序" :label-width="formLabelWidth">
					<el-input v-model="bannerData.sort" autocomplete="off" placeholder="降序排序"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth">
					 <el-radio v-model="bannerData.status" label="1">启用</el-radio>
					 <el-radio v-model="bannerData.status" label="2">禁用</el-radio>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createBanner">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				bannerData: {
					name : '',
					imgUrl : '',
					path : '',
					sort : '',
					status : '1',
				},
				dialogFormVisible: false,
				imgShow: false,
				dialogImageUrl: '',
				formLabelWidth: '120px',
			};
		},
		created() {
			this.getBanner();
		},
		methods: {
			//添加banner
			addBanner() {
				this.dialogFormVisible = true;
			},
			getBanner(){
				let that = this;
				this.$axios({
					url : '/admin/minApp/getBanner',
					data : {
						offset : 1,
						limit : 10,
					},
					success(res){
						if(res.data.code == 200){
							that.tableData = res.data.content.data
						}
					}
				});
			},
			createBanner(){
				let that = this
				this.$axios({
					url : '/admin/minApp/addBanner',
					data : that.bannerData,
					success(res){
						if(res.data.code == 200){
							that.dialogFormVisible = false;
							that.$message({
							    type: 'success',
							    message: '添加成功'
							});
						}else{
							that.dialogFormVisible = false;
							that.$message({
							    type: "warning",
							    message: '添加失败'
							});
						}
					}
				});
			},
			delBanner(param){
				let that = this;
				this.$axios({
					url : "/admin/minApp/delBanner",
					data : {
						bannerID : param.id
					},
					success(res){
						if(res.data.code == 200){
							that.$message({
							    type: 'success',
							    message: '删除成功'
							});
						}else{
							that.$message({
							    type: "warning",
							    message: '删除失败'
							});
						}
					}
				});
			},
			//upload
			upsuccess(response, file, fileList){
				if(response.code == 200){
					this.bannerData.imgUrl = response.content.path;
					this.$message({
					    type: 'success',
					    message: response.msg
					});
				}else{
					this.$message({
					    type: "warning",
					    message: response.msg
					});
				}
			},
			handleRemove(file, fileList) {
				this.bannerData.imgUrl = '';
			},
			handleClick(param){
				console.log(param)
			}
		},
	};
</script>
<style scoped>

</style>
